<template>
<el-row class="user-info-form" type="flex" justify="center" v-loading="loading">
    <el-col>
        <div class="add-new-plan">
            <p class="tips">系统会自动根据单位的在用的消防资产，按照不同的消防系统与资产类别，并依据GB25201-2010规范生成维保巡查、保养、单点测试、联动测试4种类型的维保计划。</p>
            <el-form label-width="150px" :model="planForm" :rules="planFormRules" ref="planForm" @submit.native.prevent>
                <el-form-item label="选择开始日期：" prop='startTime'>
                    <el-date-picker
                        v-model="planForm.startTime"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                    <div class="tips color-7">
                        <p>1、维保计划是按照年进行创建的；</p>
                        <p>2、强烈建议你选择月初第一天作为开始日期。</p>
                    </div>
                </el-form-item>
                <el-form-item label="选择维保标准：" prop="standardId">
                    <el-select v-model="planForm.standardId" placeholder="请选择维保标准">
                        <el-option
                            v-for="item in maintainStandardOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择维保公司：" prop="companyId">
                    <tree-select
                        v-model="planForm.companyId"
                        filterable
                        :width="200"
                        :data="maintainCompanyOptions"
                        :defaultProps="companyDefaultProps"
                        nodeKey="id">
                    </tree-select>
                </el-form-item>
                <el-form-item label="选择维保类型：" prop="maintainTypes">
                    <el-checkbox-group v-model="planForm.maintainTypes">
                        <el-checkbox v-for="item in maintainTypeOptions" :label="item.id" :key="item.id" checked>{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="自动续期：" prop="isAutoRenewal">
                    <span>已为您{{ planForm.isAutoRenewal == 1 ? '开启' : '关闭' }}自动生成下一年维保计划</span>
                    <el-switch
                        v-model="planForm.isAutoRenewal"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0">
                    </el-switch>
                    <div class="tips color-7">强烈建议你开启。开启后，系统会提前10日自动创建第二年的年度维保计划。</div>
                </el-form-item>
                <el-form-item label-width="0" class="verifyidentity-button">
                    <el-button @click.stop="closeNewPlan" round>取消</el-button>
                    <el-button type="primary" @click="savePlan('assetInfoForm')" round>新建计划</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-col>
</el-row>
</template>

<script>
import TreeSelect from '@/libs/TreeSelect/Main'
import { getMaintainOrgList } from '@/api/org'
import { updateMaintainPlan, getMaintainStandardList } from '@/api/assets'

export default {
    name: 'MaintenancePlanForm',
    props: {
        organizationId: {
            required: true
        },
        closeNewPlan: {
            type: Function,
            required: true
        }
    },
    components: { 
        TreeSelect
    },
    data() {
        var checkCompany = (rule, value, callback) => {
            if(!this.firstLoad) {
                if (!value || value === '') {
                    callback(new Error('请选择维保公司'))
                } else {
                    callback()
                }
            } else {
                this.firstLoad = false
            }
        }
        return {
            loading: false,
            firstLoad: true,
            pickerOptions: {
                disabledDate: (time) => {
                    let nowData = new Date()
                    nowData = new Date(nowData.setDate(nowData.getDate()))
                    return time < nowData
                }
            },
            companyDefaultProps: {
                children: 'nodes',
                label: 'name',
                value: 'id'
            },
            planForm: {
                orgId: this.organizationId,
                startTime: '',
                standardId: '',
                companyId: '',
                maintainTypes: [],
                isAutoRenewal: '1'
            },
            planFormRules: {
                startTime: [
                    { required: true, message: '请选择开始日期', trigger: 'change' }
                ],
                standardId: [
                    { required: true, message: '请选择维保标准', trigger: 'change' }
                ],
                companyId: [
                    { required: true, validator: checkCompany, trigger: 'change' }
                ],
                maintainTypes: [
                    { required: true, message: '请选择维保类型', trigger: 'change' }
                ]
            },
            maintainStandardOptions: [], // 维保标准下拉框数据
            maintainCompanyOptions: [], // 维保公司下拉框数据
            maintainTypeOptions: [{
               name: '维保巡查',
               id: '1'
            }, {
               name: '保养',
               id: '2'
            }, {
               name: '单点测试',
               id: '3'
            }, {
               name: '联动测试',
               id: '4'
            }], // 维保类型数据
        }
    },
    created() {
        // 获取维保标准下拉框数据
        getMaintainStandardList().then(res => {
            this.maintainStandardOptions = res.data
        })
        // 获取维保公司下拉框数据
        getMaintainOrgList({
            orgId:this.planForm.orgId
        }).then(res => {
            this.maintainCompanyOptions = res.data
        })
    },
    methods: {
        // 保存计划
        savePlan() {
            // 阻止事件冒泡
            event.stopPropagation()
            let that = this
            
            that.$refs['planForm'].validate((valid) => {
                if (valid) {
                    let parames = $.extend({}, that.planForm)
                    parames.maintainTypes = parames.maintainTypes.join(',')
                    that.loading = true 
                    // 提交
                    updateMaintainPlan(parames).then(res => {
                        if(res.status === 200) {
                            that.$message({
                                message: '保存成功！',
                                type: 'success'
                            })
                            that.closeNewPlan(true)
                        } else {
                            that.$message({
                                message: res.info,
                                type: 'warning'
                            })
                        }
                        that.loading = false
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss">
.add-new-plan {
    .tips {
        line-height: 21px;
    }
    .el-form {
        margin-top: 20px;
    }
    .el-date-editor {
        width: 100%;
    }
}
</style>

